<template>
  <div class="person">
    <h2>姓名:{{person.name}}</h2>
    <h2>年龄:{{person.age}}</h2>
    <h2>汽车:{{person.car.c1}}.{{person.car.c2}}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeFirstCar">修改第一台车</button>
    <button @click="changeSecondCar">修改第二台车</button>
    <button @click="changeCar">修改整个车</button>
    <!--     <button @click="changeName">修改名字</button>-->


  </div>
</template>

<script lang="ts" setup name="Person">  //生效需要引入外部插件import VueSetupExtend  from 'vite-plugin-vue-setup-extend'
/**
 * @author
 * 基本类型响应式数据必须用ref
 * 若需要永固一个响应式对象层级不深ref，reactive都可以
 * 若需要一个响应式对哦哦行,并且层级较深推荐实用reactive
 */
import {watch,ref,reactive,toRefs,toRef,computed} from "vue";
//data
//第一次car
let person=reactive({
  name:'张三',
  age:19,
  car:{
    c1:'BNW',
    c2:'BC'
  }
})
//method
function changeName(){
  person.name+='!'
}
function changeFirstCar(){
  person.car.c1='奥迪'

}
function changeSecondCar(){
  person.car.c2='劳斯莱斯'
}
function changeCar(){
  //第二次car
  person.car={c1:'雅迪',c2:'爱马仕'}
}
function changeAge(){
  person.age+=10
}
//监视情况4对响应式对象的某个属性,且该属性是基本类型的要写成函数式
//对象监视的是地址值需要关注对象内部,需要手动开启深度监视
// watch(()=>{return person.name},(oldValue,newValue)=>{
//
//   console.log('name变化',oldValue,newValue)
//
// })
//无法监视整体相当于监视第一次的car
// watch(person.car,(oldValue, newValue)=>{
//   console.log('car变化了',oldValue,newValue)
// },)

//监视情况4对响应式对象的某个属性,且该属性是对象类型的,可以直接写,也可以写函数式推荐写函数
watch(()=>
    person.car,(newValue,oldValue)=>{
  console.log('person.car变化了',newValue,oldValue)
},{deep:true})
</script>
<style>
button{
  margin: 5px;
}
body{
  background-color: pink;
}
li{
  font-size: 30px;
}
</style>